import React, { Component } from 'react';

import { HashRouter as Router, Route, Switch } from 'react-router-dom'
import Tabbar from './Components/Tabbar/index'
import Community from './Components/Community/index'
import Home from './Components/Home/index'
import My from './Components/My/index'
import Cart from './Components/Cart/index'

import './App.css'
class App extends Component {

  render() {
    return (
      <div className="APP">
        {/* <Tabbar></Tabbar> */}
        {/* Switch 当匹配到符合路由的时候，就不再向下寻找了，鉴于路径'/'的特殊性，跟每个路径都匹配，所以放到末尾 */}
        <Router>
          <Switch>
            <Route
              path='/community'
              exact
              render={(props) => <Tabbar {...props}> <Community></Community></Tabbar>}
            ></Route>
            <Route
              path='/cart'
              exact
              render={(props) => <Tabbar {...props}> <Cart></Cart></Tabbar>}
            ></Route>
            <Route
              path='/my'
              exact
              render={(props) => <Tabbar {...props}> <My></My></Tabbar>}
            ></Route>
            <Route
              path='/'
              exact
              render={(props) => <Tabbar {...props}> <Home></Home></Tabbar>}
            ></Route>
          </Switch>
        </Router>
      </div>
    );

  }
}

export default App;
